<template lang="html">

  <div class="car">
      <header class="header">
          <div class="header-icon">
              <span class="icon2-user"></span>
          </div>
          <span>登录/注册</span>
      </header>
      <div class="main">
          <router-link class="my-indent" :to="{ name: ''}">
              <span class="my-indent-left">我的上架</span>
              <div class="my-indent-right">
                  <span>全部上架</span>
                  <i class="icon-go"></i>
              </div>
          </router-link>

          <section class="my-pay">
              <router-link :to="{ name: ''}">
                  <span class="icon2-money"></span>
                  <p>代发货</p>
              </router-link>
              <router-link :to="{ name: ''}">
                  <span class="icon2-thecar"></span>
                  <p>已发货</p>
              </router-link>
              <router-link :to="{ name: ''}">
                  <span class="icon2-fixed"></span>
                  <p>退换修</p>
              </router-link>

          </section>

          <section class="my-vip">
            <router-link class="my-vip-top ho" :to="{ name: ''}" >
              <div class="my-vip-top-div">
                <span class="icon2-vip">
                    <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
                </span>
              </div>
              <p>
                <span>个人中心</span><i class="icon-go"></i>
              </p>
            </router-link>
            <router-link class="my-vip-bottom ho" :to="{ name: ''}">
              <div>
                <span class="icon2-money"></span>
              </div>
              <p>
                <span>我的店铺</span><i class="icon-go"></i>
              </p>
            </router-link>
          </section>

          <section class="my-service">
              <router-link class="my-service-top" :to="{ name: ''}">
                  <div>
                    <span class="icon2-service">
                        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                    </span>
                  </div>
                  <p>
                    <span>服务中心</span><i class="icon-go"></i>
                  </p>
              </router-link>
          </section>

          <section class="my-settle">
              <router-link :to="{ name: ''}" class="my-settle-bottom">
                <div>
                  <span class="icon2-settle"></span>
                </div>
                <p>
                  <span>设置</span><i class="icon-go"></i>
                </p>
              </router-link>
          </section>

      </div>
      <v-baseline></v-baseline>
      <v-footer></v-footer>
    </div>
</template>

<script>
  // import * as mockData from '@/http/mock.js' //模拟数据

  
</script>

<style scoped>
.car {
  width: 100%;
  padding-bottom: 14vw;
  background-color: #F8FCFF;
}
.car .header {
  width: 64%;
  height: 60px;
  margin-left: 18%;
  background-color:#f37d0f;
  background-size: auto 100%;
  padding: 3.2vw 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.car .header .header-icon {
  border: 0.4vw solid #ffffff;
  margin-left: 4vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  line-height: 60;
  text-align: center;
  border-radius: 50%;
}
.car .header .header-icon span::before {
  color: #ffffff;
}
.car .header > span {
  margin-left: 3.2vw;
  color: #ffffff;
  letter-spacing: 0.2vw;
}
.car .main {
  width: 100%;
}
.car .main .my-indent {
  width: 100%;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 5vw;
  height: 15vw;
  line-height: 15vw;
  background-color: #fff;
}
.car .main .my-indent:active {
  background-color: #e0e3e6;
}
.car .main .my-indent .my-indent-right span {
  display: inline-block;
  color: rgba(0, 0, 0, 0.4);
  position: relative;
}
.car .main .my-indent .my-indent-right i {
  position: relative;
  top: 0.8vw;
}
.car .main .my-pay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 2vw 0;
  background-color: #fff;
}
.car .main .my-pay > a {
  display: block;
  width: 33.33%;
  color: #999;
  text-align: center;
}
.car .main .my-pay > a > span {
  font-size: 50px;
  margin-top: 2.3vw;
  display: block;
  text-align: center;
}
.car .main .my-pay > a p {
  padding: 2.3vw 0;
  text-align: center;
}
.car .main .my-vip,
.car .main .my-service,
.car .main .my-settle {
  width: 100%;
}
.car .main .my-vip > a,
.car .main .my-service > a,
.car .main .my-settle > a {
  background-color: #fff;
  display: block;
  width: 100%;
  display: -ms-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 15vw;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 6vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.car .main .my-vip > a:active,
.car .main .my-service > a:active,
.car .main .my-settle > a:active {
  background-color: #e0e3e6;
}
.car .main .my-vip > a > div,
.car .main .my-service > a > div,
.car .main .my-settle > a > div {
  -ms-flex: 2;
  -webkit-box-flex: 2;
  flex: 2;
  padding-top: 1.3vw;
}
.car .main .my-vip > a .my-vip-top-div,
.car .main .my-service > a .my-vip-top-div,
.car .main .my-settle > a .my-vip-top-div {
  padding-top: 0;
}
.car .main .my-vip > a > p,
.car .main .my-service > a > p,
.car .main .my-settle > a > p {
  -ms-flex: 10;
  -webkit-box-flex: 10;
  flex: 10;
  position: relative;
}
.car .main .my-vip > a > p:active,
.car .main .my-service > a > p:active,
.car .main .my-settle > a > p:active {
  background-color: #e0e3e6;
}
.car .main .my-vip > a > p i,
.car .main .my-service > a > p i,
.car .main .my-settle > a > p i {
  position: absolute;
  right: 0;
  top: 0.4vw;
}
/*图标大小不一，重新定义*/
.icon-go::before {
  color: #aba8a8;
}
[class^="icon2-"],
[class*=" icon2-"] {
  font-size: 50px;
}
.icon2-service {
  font-size: 34px;
}


</style>
